"use strict";

const gulp = require('gulp');
const plugins = require('gulp-load-plugins')();
const path = require('path');

const browserSync = require('browser-sync').create();
const reload = browserSync.reload;
const clean = require('gulp-clean');

// css
// const cleanCSS = require('gulp-clean-css'); //压缩css
// const less = require('gulp-less');
// const pxtoviewport = require('postcss-px-to-viewport');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const px2rem = require('gulp-px2rem-plugin');
const autoprefixer = require('gulp-autoprefixer');
// const rename = require('gulp-rename');

// js
const concat = require('gulp-concat');
const babel = require("gulp-babel");

// images
const tinypng_nokey = require('gulp-tinypng-nokey');


// web切图 静态服务器 + 监听 scss/html 文件
gulp.task('web', function () {
    browserSync.init({
        server: "./",
        port: 3030
    });
    gulp.watch("./*.html").on('change', reload);
    gulp.watch("./assets/css/*").on('change', reload);
    gulp.watch("./src/sass/*.scss", gulp.parallel('wcss'));
    gulp.watch("./assets/images/*").on('change', reload);
    gulp.watch("./assets/images/*", gulp.parallel('tp'));
    gulp.watch("./src/js/*.js", gulp.parallel('script'));
    gulp.watch("./assets/js/*.js").on('change', reload);
});

//手机切图 静态服务器 + 监听 scss/html 文件
gulp.task('phone', function () {
    browserSync.init({
        server: {
            baseDir: "./",
            index: "phonetem.html",
        },
        port: 3031
    });
    gulp.watch("./*.html").on('change', reload);
    gulp.watch("./assets/css/*").on('change', reload);
    gulp.watch("./src/sass/*.scss", gulp.parallel('sass'));
    gulp.watch("./assets/images/*").on('change', reload);
    gulp.watch("./src/images/*", gulp.parallel('tp'));
    gulp.watch("./src/js/*.js", gulp.parallel('script'));
    gulp.watch("./assets/js/*.js").on('change', reload);
});


/*============================== css ==============================*/
gulp.task('cleancss', function (done) {
    gulp.src('./assets/css/main.css', { read: false })
        .pipe(clean());
    done();
});
// 合并sass样式 紧凑输出
// 嵌套输出 nested
// 展开输出 expanded
// 紧凑输出 compact
// 压缩输出 compressed
sass.compiler = require('node-sass');
const sassPath = './src/sass/main.scss';
gulp.task('sass', function (done) {
    gulp.src(sassPath)
        .pipe(autoprefixer())
        .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
        .pipe(gulp.dest('./assets/css'));
    done();
});
// 手机页面px转rem
gulp.task('px2rem', function (done) {
    gulp.src('./assets/css/*.css')
        .pipe(px2rem())
        .pipe(px2rem({
            'width_design': 750, //设计稿宽度。默认值640
            'valid_num': 4, //生成rem后的小数位数。默认值4
            'pieces': 10, //将整屏切份。默认为10，相当于10rem = width_design(设计稿宽度)
            'ignore_px': [1, 2], //让部分px不在转换成rem。默认为空数组
            'ignore_selector': [] //让部分选择器不在转换为rem。默认为空数组
        }))
        .pipe(gulp.dest('./assets/css'));
    done();
});

gulp.task('wcss', gulp.series('cleancss', 'sass', function (done) {
    // do thing
    done();
}));
gulp.task('pcss', gulp.series('cleancss', 'px2rem', 'sass', function (done) {
    // do thing
    done();
}));

/*
 *  viewportWidth：视口宽度，这里设置为跟设计稿宽度一致；
 *  viewportHeight：视口高度，随便设置一个就可以；
 *  unitPrecision：转换后值的精度，3表示保留3位小数；
 *  viewportUnit：转换成什么视口单位，这里当然是vw；
 *  selectorBlackList：是一个选择符数组，对应声明中的像素单位不会转换；
 *  minPixelValue：最小像素值，大于等于这个值才会转换；
 *  mediaQuery：是否转换媒体查询中的像素。
 */
// gulp.task('postcss', function () {
//     var processors = [
//         pxtoviewport({
//             viewportWidth: 750,
//             viewportHeight: 1334,
//             unitPrecision: 3,
//             viewportUnit: 'vw',
//             selectorBlackList: ['.usepixel'],
//             minPixelValue: 1,
//             mediaQuery: false
//         })
//     ];

//     return gulp.src(['assets/css/**/*.css'])
//         .pipe(postcss(processors))
//         .pipe(gulp.dest('assets/css'));
// });


/*============================== images ==============================*/
// 图片压缩
gulp.task('tp', function () {
    gulp.src('./src/images/*')
        .pipe(tinypng_nokey())
        .pipe(gulp.dest('./assets/images'));
})


/*============================== js ==============================*/
gulp.task('cleanjs', function (done) {
    gulp.src('./assets/js/main.js', { read: false })
        .pipe(clean());
    done();
});

// ES6转化为ES5 合并
gulp.task('es62es5', function (done) {
    gulp.src("./src/js/*.js")// ES6存放路径
        .pipe(babel())
        .pipe(concat('main.js'))
        .pipe(gulp.dest('./assets/js'))
    done();
});

gulp.task('script', gulp.series('cleanjs', 'es62es5', function (done) {
    // do thing
    done();
}));
